<template>
  <div style="height: 100%; width: 100%;">
    <el-container style="background-color: #F0F8F8; padding: 10px;width: 100%; height: 100%;">
      <el-scrollbar style="height:100%; width: 100%;">
        <div>
          <div class="nameClass" v-html="termBetweenData.name"></div>
          <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY" v-if="UTIL.isNotEmpty(termBetweenData[prop])">
            <div class="fieldName">{{ propName }}：</div>
            <div class="name-content" v-html="termBetweenData[prop]"></div>
          </div>
          <hr style="margin-left: 0px; width: 60%;"/>
          <div v-if="termBetweenData.explanation.length > 0">
            <div class="fieldName">释义：</div>
            <div v-for="item in termBetweenData.explanation" style="margin-top: 15px;">
              <div v-html="item"></div>
              <div
                style="width: 65%;margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                <div>{{ termBetweenData.nameSource }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "TermBetweenDetail",
  props: {
    id: String
  },
  data() {
    return {
      termBetweenData: {
        explanation: []
      }
    }
  },
  created() {
    this.axios.get("/pmph/action/term/selectTermBetweenDetailById", {
      params: {
        id: this.id,
      }
    }).then((res) => {
      this.termBetweenData = res.data;
      this.termBetweenData.nameSource = '《' + this.termBetweenData.nameSource[0].name + '》-' +
        (UTIL.isEmpty(this.termBetweenData.nameSource[0].version) ? "" :
          (this.termBetweenData.nameSource[0].version + "-"))
        + this.termBetweenData.nameSource[0].isbn;
    })
  }
}
</script>

<style scoped>
.inline-block {
  margin-top: 15px;
}

.name-content {
  display: inline-block;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.fieldName {
  display: inline-block;
  margin-top: 15px;
}

.left {
  margin-left: 60px;
}
</style>
